<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> jsGraph sample 2</title>
 </head>
 <body>
 <div id="canvas" style="width:800px;height:800px;border:1px solid #aaa;background-color:#ccc;"></div>
  <script type="text/javascript" src="jsGraph.js"></script>
  <script type="text/javascript">
  <!--
	var canvas = createJsGraph(document.getElementById('canvas'),800,800);
	with(canvas){
		arc([200,200], 200, 0, 45).stroke('black',2).fill(null);
		arc([200,200], 200, 45, 45).stroke('red',2).fill(null);
		arc([200,200], 200, 0, -45).stroke('red',2).fill(null);
		arc([200,200], 200, -45, -45).stroke('black',2).fill(null);
		line([0,200],[400,200]).stroke('#c00',1); 
		roundRect([100,100],[300,150],5).fill('white').stroke('#888',1);
	}
	
	var l=canvas.line([200,10],[200,30]).stroke('black',1);

	var g=canvas.group([200,200]);
	with(g){
		polygon([[0,-120],[20,-20],[0,0],[-20,-20]]).fill('#ddf').stroke('black',1);
		circle([0,-120],10).stroke('yellow',2).fill(null);
		ellipse([-10,-10],[10,50]).stroke('black',1).fill('#ddf');
		arc([0,0],40,135,90).stroke('black',2).fill(null);
		rect([-2,-70],[2,-18]).stroke(null).fill('yellow');
	}

	function rotate1(){
		g.rotate(6,[200,200]);
	}
	function rotate2(){
		l.rotate(6,[200,30]);
	}
	
	setInterval('rotate1()',1000);
	setInterval('rotate2()',200);
	
  //-->
  </script>
 </body>
</html>
